<template>
  counter: {{ counter }}

  <div>
    <el-button type="primary" size="small" @click="reset">reset</el-button>
    <el-button type="primary" size="small" @click="resume">resume</el-button>
    <el-button type="primary" size="small" @click="pause">pause</el-button>
  </div>
</template>

<script setup lang="ts">
import { useInterval } from '@vueuse/core';

// count will increase every 200ms
const { counter, reset, resume, pause } = useInterval(1000, { controls: true });
</script>
